<template>
	<div class="content">
		<div class="list_box" v-if="list.length">
			<div class="box" v-for="(item,index) in list" :key="index">
				<p class="title">购买条数（{{item.number}}条）</p>
				<div class="msg">
					<p>商品价格：<span>{{item.payPrice}}元</span></p>
					<p>付款时间：{{item.createTime}}</p>
					<p>订单号：{{item.no}}</p>
				</div>
			</div>
		</div>
		<div class="no_data" v-else>
			<img src="/static/no-data.png" alt="">
			<p>暂无购买记录</p>
		</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import api from '@/api';
	import { formatDateAll } from '@/utils/utils.js'
	import Config from '@/config/index.js'
	export default {
		data() {
			return {
				list:[],
				param:{
					pageNo:1,
					pageSize:10,
				},
			}
		},
		computed: {
			...mapState({
				userId: state => state.user.userId,
				token: state => state.user.token
			})
		},
		methods: {

			getList(state){
				api.user.order_success(this.param).then(res=>{
					if(res.code == 200){
						uni.hideLoading();
						if(this.param.pageNo>1 && !res.data.list.length){
							this.$toast('已经到底了~')
							return
						}
						if(state){
							this.list = []
						}
						res.data.list.map(item=>{
							item.payPrice = (item.payPrice/100).toFixed(2);
							item.createTime = formatDateAll(item.createTime)
						})
						this.list = this.list.concat(res.data.list)
					}
				})
			}
		},
		onLoad(options) {
			this.getList()
		},
		onReachBottom(){
			this.param.pageNo++
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100vh;
		background: #f7f7f7;
		padding-bottom:30rpx;
		.list_box{
			padding:24rpx 30rpx;
			.box{
				background: #fff;
				border-radius: 10rpx;
				padding:0 30rpx;
				margin-bottom:30rpx;
				.title{
					line-height: 100rpx;
					font-size: 32rpx;
					font-weight: bold;
					border-bottom: 1px dashed #D8D8D8;
				}
				.msg{
					padding:30rpx 0;
					color:#999999;
					font-size:26rpx;
					p{
						margin-bottom:16rpx;
						&:last-child{
							margin-bottom:0;
						}
						span{
							font-size: 30rpx;
							font-weight: bold;
							color:#FF5218;
						}
					}
				}
			}
		}
		.no_data{
			text-align: center;
			padding-top:100rpx;
			img{
				width: 320rpx;
				height: 320rpx;
			}
			p{
				font-size: 24rpx;
				color: #999999;
				margin-top:-40rpx;
			}
		}
	}
</style>
